<template>
  <div class="warp">
    <ul class="item">
      <li class="list head">
        <span class="data1">项目名称</span>
        <span class="data2">实施单位</span>
        <span class="data3">责任单位</span>
        <span class="data4">包挂领导</span>
        <span class="data5">建设内容</span>
        <span class="data6">项目推进计划</span>
        <span class="data7">目前项目推进情况</span>
      </li>
      <vue3-seamless-scroll :list="bottomdata" class="tablescroll" :hover="true"
        :step="1">
        <li v-for="(item, index) in bottomdata" :key="index" class="list">
          <span class="data1 line-clamp-2">{{ item.zth }}</span>
          <span class="data2 line-clamp-2">{{ item.xmm }}</span>
          <span class="data3 line-clamp-2">{{ item.jbnr }}</span>
          <span class="data4 line-clamp-2">{{ item.hyfl }}</span>
          <span class="data5 line-clamp-2">{{ item.gjys }}</span>
          <span class="data6 line-clamp-2">{{ item.xmlx }}</span>
          <span class="data7 line-clamp-2">{{ item.tjqk }}</span>
        </li>
      </vue3-seamless-scroll>
    </ul>
  </div>
</template>
<script setup>
// import vueSeamlessScroll from "vue-seamless-scroll";
const props = defineProps({
  bottomdata: {
    type: Array,
    require: true,
    default: [],
  },
});
</script>
<style lang="scss" scoped>
.warp {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 10px;
}
li {
  justify-content: space-between;
  align-items: center;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.data1 {
  min-width: 100px;
  text-align: center;
}
.data2 {
  min-width: 100px;
  text-align: center;
}
.data3 {
  min-width: 100px;
  text-align: center;
}

.data4 {
  min-width: 100px;
  text-align: center;
}
.data5 {
  min-width: 300px;
  text-align: center;
}
.data6 {
  min-width: 200px;
  text-align: center;
}
.data7 {
  min-width: 400px;
  text-align: center;
}

.item {
  width: 100%;
  height: 550px;
  background-image: url("@/assets/images/Group 401488@2x.png");
  background-attachment: fixed;
  background-size: 100% 60px;
  background-repeat: no-repeat;
  overflow-x: scroll;
  overflow-y: hidden;
}
.list:nth-of-type(even) {
  background-color: rgba($color: #048cf1, $alpha: 0.2);
}
.head {
  line-height: 40px;
}
.tablescroll {
  height: 510px;
  width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}
</style>
